<template>
	<div class="NewsType">
		<van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" border="false" />
		
		<van-tabs v-model="active" title-active-color='#1978ED' animated swipeable>
		  <van-tab title="文章">
			  
			  <div class="bsc_itemNt" v-if="newList.wzList.length > 0">
			  
			  	<div @click="$router.push('/news_info?id=' + item.id)" class="bi_news" v-for="item,index in newList.wzList" :key="index">
			  		<div class="bin_left">
			  			<img :src="item.image_input[0]" alt="">
			  		</div>
			  
			  		<div class="bin_right">
			  			<p>{{item.synopsis}}</p>
			  
			  			<div>
			  				<span>【{{item.title}}】</span>
			  				<span>{{item.shijian}}</span>
			  			</div>
			  		</div>
			  	</div>
			  	
			  </div>
			  
			  <img style="width: 80%;margin: auto;;display: block;margin-top: .5rem;" v-if="newList.wzList.length <= 0" src="../../../assets/images/noNews.png" alt="">
			  
		  </van-tab>
		  <van-tab title="视频">
			  
			  <div class="bsc_itemNt" v-if="newList.spList.length > 0">
			  
			  	<div @click="$router.push('/news_info?id=' + item.id)" class="bi_news" v-for="item,index in newList.spList" :key="index">
			  		<div class="bin_left">
			  			<img :src="item.image_input[0]" alt="">
						<img id="play_video" src="../../../assets/images/play.png" alt="">
			  		</div>
			  
			  		<div class="bin_right">
			  			<p>{{item.synopsis}}</p>
			  
			  			<div>
			  				<span>【{{item.title}}】</span>
			  				<span>{{item.shijian}}</span>
			  			</div>
			  		</div>
			  	</div>
			  	
			  </div>
			  
			  <img style="width: 80%;margin: auto;;display: block;margin-top: .5rem;" v-if="newList.spList.length <= 0" src="../../../assets/images/noNews.png" alt="">
			  
		  </van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Loading,
		Tab, Tabs 
	} from 'vant';
	import {
		articleList
	} from '../../../api/store.js'
	Vue.use(NavBar);
	Vue.use(Tab);
	Vue.use(Tabs);


	export default {
		components: {
			NavBar
		},
		created() {
			this.getNewInfo()
			
			let type = this.$route.query.id
			
			type == 1 ? this.title = 'C端推广方案' : type == 2 ?  this.title = 'B端推广方案' : type == 3 ? this.title = '5G项目讲解' : this.title = '公司介绍'
		},
		data() {
			return {
				active:0,
				
				newInfo: "",

				title: '推广方案',
				
				newList:{
					wzList:[],
					spList:[]
				}
			}
		},
		methods: {
			getNewInfo() {

				articleList(this.$route.query.id).then((res) => {

					res.data.forEach((item,index) => {
						
						if(item.type == 1){
							
							
							this.newList.spList.push(item)
							
							
						}else{
							
							this.newList.wzList.push(item)
							
						}
						
					})

				}).catch(() => {

					this.newInfo = null

				})

			},

			onClickLeft() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.bsc_itemNt {
		width: 90%;
		margin: auto;
		background-color: white;
		border-radius: .1rem;
		padding: .2rem;
		box-sizing: border-box;
		margin-bottom: .2rem;

		.bi_title {
			display: flex;
			align-items: center;
			margin-bottom: .32rem;

			p {
				margin-left: .14rem;
			}
		}

		.bi_news {
			// padding: 0 .3rem;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-bottom: .2rem;

			.bin_left {
				position: relative;
				width: 2.66rem;

				img {
					object-fit: cover;
					width: 100%;
					height: 1.72rem;
					border-radius: .1rem;
				}

				#play_video {
					position: absolute;
					top: .65rem;
					left: 50%;
					transform: translateX(-50%);
					width: .55rem;
					height: .55rem;
				}
			}

			.bin_right {
				width: 3.1rem;
				margin-left: .27rem;
				font-size: .3rem;
				height: 1.72rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				div {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #999999;
					font-size: .24rem;
				}
				
				>p:nth-child(1){
					overflow: hidden;
					text-overflow: ellipsis;
					display:-webkit-box; //作为弹性伸缩盒子模型显示。
					-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp:2; //显示的行
				}
			}
		}
	}
	
	.NewsType {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: rgb(251,251,251);
		
		.van-tabs__line{
			background-color: #1978ED !important;
			width: 50px !important;
			height: 2px !important;
		}
		
		.van-tabs__nav{
			background-color: transparent !important; 
		}
	}
</style>
